<script setup>
// import { ref } from 'vue';
import AppHeader from '@/components/Header/AppHeader.vue'//引入头部组件

// useStore() 是 Vue3 组合式 API 里的方法，它可以获取 Vuex 的 store 实例
// store 里存放了全局的状态（state），在任何组件里都可以使用
// store.state.user.userInfo 是 Vuex 里的全局状态

// 计算属性：获取 Vuex 里的用户信息


// console.log("最后" + userInfo.value);
// console.log(userInfo.value);
</script>


<template>
    <div id="logi">
        <AppHeader/>
        <div id="an" style="margin: 20px auto; height: 800px; width: 1300px;">
            <div id="a">
                <div id="g">
                    账号设置
                </div>
                <div id="c">
                    <nav>
                        <router-link to="ShopSetting">安全设置</router-link>
                    </nav>
                    <!-- 安全设置 -->
                    <!-- ShopSetting -->
                </div>
                <div class="g">
                    <nav>
                        <router-link to="TransactionInformation">个人交易信息</router-link>
                    </nav>
                    <!-- 个人交易信息 -->
                    <!-- TransactionInformation -->
                </div>
                <div class="g">
                    <nav>
                        <router-link to="ReceivingAddress">收货地址</router-link>
                    </nav>
                    <!-- 收货地址 -->
                    <!-- ReceivingAddress -->
                </div>
                <div class="g">
                    个人资料
                    <!-- ShopAvater上传头像 -->
                    <!-- ShopRerson个人资料界面 -->
                </div>

            </div>
            <main>
                <router-view></router-view>
            </main>
            
        </div>







        <!-- 底部黄色 -->
        <!-- <div id="footer"></div> -->

    </div>
</template>


<script>


</script>

<style>
#an {
    /* height: 800px; */
    /* width: 1300px; */
    border: 1px solid rgb(0, 0, 0);
    margin: 0 auto;
    display: flex;
}

#a {
    width: 300px;
    height: 800px;
    /* border: 1px solid rgb(254, 6, 6); */

    /* background-color: rgb(85, 85, 166); */
}

#b {
    width: 1000px;
    height: 800px;
    /* border: 1px solid rgb(51, 0, 255); */
    background-color: rgb(114, 147, 169);

}

#g {
    height: 80px;
    width: 200px;
    margin: 0 auto;
    background-color: rgb(236, 128, 141);
    margin: 30px;
    text-align: center;
    font-size: 40px;
    /* 行高 */
    line-height: 80px;
    color: white;
}

#c {
    height: 55px;
    width: 125px;
    margin: 37px 0px 0px 90px;
    background-color: rgb(207, 24, 45);
    text-align: center;
    font-size: 20px;
    line-height: 55px;
    color: white;
}

.g {
    height: 55px;
    width: 125px;
    margin: 37px 0px 0px 90px;
    background-color: rgb(85, 85, 166);
    text-align: center;
    font-size: 20px;

    line-height: 55px;
    color: white;
}
</style>